<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Float Label</h1>
        <p>All input text components support floating labels.</p>
    </div>
    <app-demoActions github="floatlabel" stackblitz="floatlabel-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <div class="p-fluid grid">
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <input type="text" id="inputtext" pInputText [(ngModel)]="value1"> 
                    <label for="inputtext">InputText</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label p-input-icon-left">
                    <i class="pi pi-search"></i>
                    <input type="text" id="inputtext-left" pInputText [(ngModel)]="valueIconLeft"> 
                    <label for="inputtext-left">Left Icon</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label p-input-icon-right">
                    <i class="pi pi-spin pi-spinner"></i>
                    <input type="text" id="inputtext-right" pInputText [(ngModel)]="valueIconRight"> 
                    <label for="inputtext-right">Right Icon</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
                    <label for="autocomplete">AutoComplete</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar>
                    <label for="calendar">Calendar</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-chips inputId="chips" [(ngModel)]="value4"></p-chips>
                    <label for="chips">Chips</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask>
                    <label for="inputmask">InputMask</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber>
                    <label for="inputnumber">InputNumber</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <div class="p-inputgroup">
                    <span class="p-inputgroup-addon">
                        <i class="pi pi-user"></i>
                    </span>
                    <span class="p-float-label">
                        <input type="text" id="inputgroup" pInputText [(ngModel)]="value7"> 
                        <label for="inputgroup">InputGroup</label>
                    </span>
                </div>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-cascadeSelect inputId="cascadeSelect" [options]="cascadeSelectCountries" optionLabel="cname" optionGroupLabel="name" 
                        [optionGroupChildren]="['states', 'cities']"></p-cascadeSelect>
                    <label for="cascadeSelect">CascadeSelect</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"></p-dropdown>
                    <label for="dropdown">Dropdown</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"></p-multiSelect>
                    <label for="multiselect">MultiSelect</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <textarea inputId="textarea" rows="3" style="resize: none;" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
                    <label for="textarea">Textarea</label>
                </span>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-password inputId="password" [(ngModel)]="value11"></p-password>
                    <label for="password">Password</label>
                </span>
            </div>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/floatlabel" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-floatlabel-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
            
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-fluid grid"&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;input type="text" id="inputtext" pInputText [(ngModel)]="value1"&gt; 
            &lt;label for="inputtext"&gt;InputText&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label p-input-icon-left"&gt;
            &lt;i class="pi pi-search"&gt;&lt;/i&gt;
            &lt;input type="text" id="inputtext-left" pInputText [(ngModel)]="valueIconLeft"&gt; 
            &lt;label for="inputtext-left"&gt;Left Icon&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label p-input-icon-right"&gt;
            &lt;i class="pi pi-spin pi-spinner"&gt;&lt;/i&gt;
            &lt;input type="text" id="inputtext-right" pInputText [(ngModel)]="valueIconRight"&gt; 
            &lt;label for="inputtext-right"&gt;Right Icon&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name"&gt;&lt;/p-autoComplete&gt;
            &lt;label for="autocomplete"&gt;AutoComplete&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-calendar inputId="calendar" [(ngModel)]="value3"&gt;&lt;/p-calendar&gt;
            &lt;label for="calendar"&gt;Calendar&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-chips inputId="chips" [(ngModel)]="value4"&gt;&lt;/p-chips&gt;
            &lt;label for="chips"&gt;Chips&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"&gt;&lt;/p-inputMask&gt;
            &lt;label for="inputmask"&gt;InputMask&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-inputNumber inputId="inputnumber" [(ngModel)]="value6"&gt;&lt;/p-inputNumber&gt;
            &lt;label for="inputnumber"&gt;InputNumber&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;div class="p-inputgroup"&gt;
            &lt;span class="p-inputgroup-addon"&gt;
                &lt;i class="pi pi-user"&gt;&lt;/i&gt;
            &lt;/span&gt;
            &lt;span class="p-float-label"&gt;
                &lt;input type="text" id="inputgroup" pInputText [(ngModel)]="value7"&gt; 
                &lt;label for="inputgroup"&gt;InputGroup&lt;/label&gt;
            &lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-cascadeSelect inputId="cascadeSelect" [options]="cascadeSelectCountries" optionLabel="cname" optionGroupLabel="name" 
                [optionGroupChildren]="['states', 'cities']"&gt;&lt;/p-cascadeSelect&gt;
            &lt;label for="cascadeSelect"&gt;CascadeSelect&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"&gt;&lt;/p-dropdown&gt;
            &lt;label for="dropdown"&gt;Dropdown&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"&gt;&lt;/p-multiSelect&gt;
            &lt;label for="multiselect"&gt;MultiSelect&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;textarea inputId="textarea" rows="3" style="resize: none;" cols="30" [(ngModel)]="value10" pInputTextarea&gt;&lt;/textarea&gt;
            &lt;label for="textarea"&gt;Textarea&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-4"&gt;
        &lt;span class="p-float-label"&gt;
            &lt;p-password inputId="password" [(ngModel)]="value11"&gt;&lt;/p-password&gt;
            &lt;label for="password"&gt;Password&lt;/label&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class FloatLabelDemo &#123;

    countries: any[];

    cascadeSelectCountries: any[];

    cities: any[];

    filteredCountries: any[];

    value1: any;

    value2: any;

    value3: any;

    value4: any;

    value5: any;

    value6: any;

    value7: any;

    value8: any;
    
    value9: any;

    value10: any;

    value11: any;

    valueIconLeft: any;

    valueIconRight: any;

    constructor(private countryService: CountryService) &#123;
        this.cities = [
            &#123;name: 'New York', code: 'NY'&#125;,
            &#123;name: 'Rome', code: 'RM'&#125;,
            &#123;name: 'London', code: 'LDN'&#125;,
            &#123;name: 'Istanbul', code: 'IST'&#125;,
            &#123;name: 'Paris', code: 'PRS'&#125;
        ];
    &#125;

    ngOnInit() &#123;
        this.countryService.getCountries().then(countries =&gt; &#123;
            this.countries = countries;
        &#125;);

        this.cascadeSelectCountries = [
            &#123;
                name: 'Australia',
                code: 'AU',
                states: [
                    &#123;
                        name: 'New South Wales',
                        cities: [
                            &#123;cname: 'Sydney', code: 'A-SY'&#125;,
                            &#123;cname: 'Newcastle', code: 'A-NE'&#125;,
                            &#123;cname: 'Wollongong', code: 'A-WO'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Queensland',
                        cities: [
                            &#123;cname: 'Brisbane', code: 'A-BR'&#125;,
                            &#123;cname: 'Townsville', code: 'A-TO'&#125;
                        ]
                    &#125;,
                    
                ]
            &#125;,
            &#123;
                name: 'Canada', 
                code: 'CA',
                states: [
                    &#123;
                        name: 'Quebec',
                        cities: [
                            &#123;cname: 'Montreal', code: 'C-MO'&#125;,
                            &#123;cname: 'Quebec City', code: 'C-QU'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Ontario',
                        cities: [
                            &#123;cname: 'Ottawa', code: 'C-OT'&#125;,
                            &#123;cname: 'Toronto', code: 'C-TO'&#125;
                        ]
                    &#125;,
                    
                ]
            &#125;,
            &#123;
                name: 'United States',
                code: 'US',
                states: [
                    &#123;
                        name: 'California',
                        cities: [
                            &#123;cname: 'Los Angeles', code: 'US-LA'&#125;,
                            &#123;cname: 'San Diego', code: 'US-SD'&#125;,
                            &#123;cname: 'San Francisco', code: 'US-SF'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Florida',
                        cities: [
                            &#123;cname: 'Jacksonville', code: 'US-JA'&#125;,
                            &#123;cname: 'Miami', code: 'US-MI'&#125;,
                            &#123;cname: 'Tampa', code: 'US-TA'&#125;,
                            &#123;cname: 'Orlando', code: 'US-OR'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Texas',
                        cities: [
                            &#123;cname: 'Austin', code: 'US-AU'&#125;,
                            &#123;cname: 'Dallas', code: 'US-DA'&#125;,
                            &#123;cname: 'Houston', code: 'US-HO'&#125;
                        ]
                    &#125;
                ]
            &#125;
        ];
    &#125;

    searchCountry(event) &#123;
        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
        let filtered : any[] = [];
        let query = event.query;
        for(let i = 0; i &lt; this.countries.length; i++) &#123;
            let country = this.countries[i];
            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) &#123;
                filtered.push(country);
            &#125;
        &#125;
        
        this.filteredCountries = filtered;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-floatlabel-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>